
<template>
  <div class="help">
    <ul v-if="showResult" class="progress">
      <li v-for="(step, index) in rescueProgress" :key="index" class="progress-step" :class="{'active': step.status}">
        <!-- 发起救援 -->
        <section class="progress-step-container" v-if="step.type == 'unimplemented'">
          <!-- title -->
          <h3 class="title">{{step.title}}</h3>
          <section v-if="step.status">
            <div class="plateNumber content">
              <span>{{step.plateNumber}}&nbsp;{{step.content}}</span>
            </div>
            <div class="date">
              <span>时间:</span>
              <span class="date">{{step.happenDate}}</span>
            </div>
            <div class="location">
              <span>地点:</span>
              <span class="location">{{step.location}}</span>
            </div>
          </section>
        </section>
        <!-- 系统派单 -->
        <section class="progress-step-container" v-if="['auto', 'manual'].indexOf(step.type) > -1">
          <!-- title -->
          <h3 class="title">{{step.title}}</h3>
          <section v-if="step.status">
            <div>
              <span>派单类型:</span>
              <span>{{PROGRESS_MAPPER[step.type]}}</span>
            </div>
            <div>
              <span>任务发送给 用户:</span>
              <span>{{step.rescuer}}</span>
            </div>
            <div class="mobile">
              <span>电话:</span>
              <span class="location">{{step.mobile}}</span>
            </div>
            <div class="date">
              <span>时间:</span>
              <span class="date">{{step.happenDate}}</span>
            </div>
          </section>
        </section>
        <!-- 救援进度 -->
        <section class="progress-step-container" v-if="['arrived', 'started', 'implemented'].indexOf(step.type) > -1">
          <!-- title -->
          <h3 class="title">{{step.title}}</h3>
          <section v-if="step.status">
            <div class="mobile">
              <span>进展:</span>
              <span class="location">{{PROGRESS_MAPPER[step.type]}}</span>
            </div>
            <div class="date">
              <span>时间:</span>
              <span class="date">{{step.happenDate}}</span>
            </div>
          </section>
        </section>
        <!-- 评价 -->
        <section class="progress-step-container" v-if="['reviewed', 'canceled'].indexOf(step.type) > -1">
          <!-- title -->
          <h3 class="title">{{step.title}}</h3>
        </section>
      </li>
    </ul>
  </div>
</template>
<script>
//http://localhost:8080/index.html?rescueId=1&orderId=1&roletype=afterSale#/help_message
//角色类型[总经理：manager，市场：market，销售:salesman，售后：afterSale]
/**
 * unimplemented:发起救援
 * auto:系统派单(自动派单),
 * manual:系统派单(手动派单)
 * canceled:取消救援,
 * implemented:完成救援
 * reviewed:评价救援,
 * started:救援进度(救援人员开始救援)
 * arrived:救援进度(到达救援地点);
 */
export default {
  name: 'help',
  data() {
    return {
      id: this.$.query("rescueId"),
      cancelStatus: false, // 是否 取消救援
      showResult: false,
      rescueProgress: [{
        status: false,
        title: '发起救援',
        content: '发起救援请求',
        type: 'unimplemented',
        happenDate: '',
        plateNumber: '', // 车牌号
        location: ''
      }, {
        status: false,
        title: '系统派单',
        content1: '派单类型:',
        type: '', // auto:系统派单(自动派单), manual:系统派单(手动派单)
        content2: '任务发给 用户:',
        rescuer: '',
        mobile: '',
        happenDate: '',
      }, {
        status: false,
        title: '救援进度',
        type: '', // 救援进度 started(救援人员开始救援), arrived(到达救援地点)
        happenDate: '',
      }, {
        status: false,
        title: '完成',
        type: 'implemented',
        happenDate: '',
      }, {
        status: false,
        title: '评价',
        type: 'reviewed',
      }, {
        status: false,
        title: '取消救援',
        type: 'canceled',
      }],
      // const
      PROGRESS_MAPPER: {
        unimplemented: "发起救援",
        auto: "自动派单",
        manual: "手动派单",
        arrived: "到达救援地点",
        started: "救援人员开始救援",
        canceled: "取消救援",
        implemented: "完成救援",
        reviewed: "评价救援"
      }
    }

  },
  created() {
    // get data
    this.ListRescueProgress()
  },
  methods: {
    // 查询进度
    ListRescueProgress() {
      this.$.get({
        methodName: "ListRescueProgress",
        rescueId: this.id
      }).then((res) => {
        alert(res)
        alert(res.data.rescueProgress)
        this.getProgress(res.data.rescueProgress || [])
      })
    },
    // progress 排序
    getProgress(progresses) {
      progresses.forEach(progress => {
        this.makeRescueProgress(progress)
      })
      // 如果存在取消订单状态, 需要特殊处理
      this.makeRescueProgressCancel()
      this.showResult = true;
      return progresses
    },
    makeRescueProgressCancel() {
      // 存在 取消救援状态
      if (this.cancelStatus) {
        let arr = [];
        this.rescueProgress.forEach(progress => {
          if (progress.status) {
            arr.push(progress)
          }
        })
        this.rescueProgress = arr;
      } else {
        // 不存在
        this.rescueProgress.splice(-1, 1)
      }
    },
    makeRescueProgress(progress) {
      switch (progress.stage) {
        case 'unimplemented': {
          // 发起救援
          let obj = this.rescueProgress[0]
          obj.status = true;
          obj.happenDate = progress.happenDate;
          obj.plateNumber = progress.car.plateNumber; // 车牌号
          obj.location = progress.location;
          obj.type = progress.stage;
          break;
        }
        case 'manual' || 'auto': {
          // manual(手动派单) auto(自动派单)
          let obj = this.rescueProgress[1]
          obj.status = true;
          obj.type = progress.stage;
          obj.rescuer = progress.rescuer.name;
          obj.mobile = progress.rescuer.mobile;
          obj.happenDate = progress.happenDate;
          break;
        }
        case 'started' || 'arrived': {
          // 救援进度 started(救援人员开始救援), arrived(到达救援地点)
          let obj = this.rescueProgress[2]
          obj.status = true;
          obj.happenDate = progress.happenDate;
          obj.type = progress.stage;
          break;
        }
        case 'canceled': {
          // 取消救援
          this.cancelStatus = true;
          let obj = this.rescueProgress[5]
          obj.status = true;
          obj.type = progress.stage;
          break;
        }
        case 'implemented': {
          // 完成救援
          let obj = this.rescueProgress[3]
          obj.status = true;
          obj.happenDate = progress.happenDate;
          obj.type = progress.stage;
          break;
        }
        case 'reviewed': {
          // 评价救援
          let obj = this.rescueProgress[4]
          obj.status = true;
          obj.type = progress.stage;
          break;
        }
      }
    }
  }
}


</script>
<style lang="scss" scoped>
.progress {
  padding: 20px;
  .progress-step {
    padding: 10px;
    min-height: 80px;
    position: relative;
    &:before {
      content: " ";
      width: 20px;
      height: 20px;
      background: #ccc;
      border: none;
      border-radius: 50%;
      display: inline-block;
      position: absolute;
    }
    &:after {
      content: " ";
      position: absolute;
      background: #ccc;
      display: inline-block;
      width: 2px;
      height: 90%;
      left: 20px;
      top: 30px;
    }
    &.active {
      &:before {
        background: #f98700;
        border: #ffc37c solid 3px;
      }
      &:after {
        background: #ffc37c;
      }
    }
    .progress-step-container {
      margin-left: 30px;
      section {
        padding-bottom: 15px;
        border-bottom: 1px solid #ccc;
      }
      div {
        font-size: 14px;
        line-height: 20px;
      }
      .title {
        color: #ccc;
        font-weight: 500;
        padding-bottom: 10px;
      }
    }
  }
  .progress-step:last-child {
    &:after {
      content: none;
    }
  }
}
</style>
